<template>
    <div id="login">
        <div class="login">
            <div class="loginAvater">
                <img
                    src="../../webLogo.png"
                    alt=""
                >
            </div>
            <div class="loginBox">
                <el-form
                    :model="form"
                    :rules="rules"
                    ref="formRef"
                >
                    <el-form-item
                        prop="username"
                        required
                    >
                        <el-input
                            class="loginIpt"
                            v-model="form.username"
                            placeholder="请输入已验证手机号"
                            size="large"
                        />
                    </el-form-item>
                    <el-form-item
                        prop="password"
                        required
                    >
                        <el-input
                            class="loginIpt"
                            type="password"
                            v-model="form.password"
                            placeholder="请输入密码"
                            size="large"
                        />
                    </el-form-item>
                </el-form>
                <el-button
                    @click="toHome(formRef)"
                    class="loginBtn"
                    type="primary"
                    size="large"
                >登 录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import loginHttp from "@/https/login.js";
import menuHttp from "@/https/menu.js";
import { getMenuRoutes } from "@/utils/menuAuth.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const formRef = ref();
const router = useRouter();
const route = useRoute();
const rules = reactive({
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const form = reactive({
    username: "",
    password: "",
});
const toHome = async (formRef) => {
    if (!formRef) return;
    await formRef.validate((valid, fields) => {
        if (valid) {
            loginHttp.login(form).then((res) => {
                if (res.data.code == 200) {
                    Storage.localSet(
                        "tokenValue",
                        res.data.data.tokenInfo.tokenValue
                    );
                    Storage.localSet(
                        "tokenName",
                        res.data.data.tokenInfo.tokenName
                    );
                    Storage.localSet(
                        "loginId",
                        res.data.data.tokenInfo.loginId
                    );
                    Storage.localSet("depId", res.data.data.depId);
                    Storage.localSet("username", res.data.data.username);
                    Storage.localSet("realName", res.data.data.realName);
                    Storage.localSet("userId", res.data.data.id);
                    Storage.localSet("roleIds", res.data.data.roleIds);
                    Storage.localSet("roleNames", res.data.data.roleNames);
                    Storage.localSet("isUpdatePwd", res.data.data.isUpdatePwd);
                    menuRoleKey(res.data.data.roleIds)
                    // let params = {
                    //     pageNo: 1,
                    //     pageSize: 1000,
                    // };
                    // menuHttp.menuMenuList(params).then((res) => {
                    //     console.log(res.data.data, "res.data.data");
                    //     Storage.localSet(
                    //         "menuList",
                    //         JSON.stringify(res.data.data)
                    //     );
                    //     menuHttp
                    //     .menuRoutes(res.data.data.tokenInfo.loginId)
                    //     .then((res) => {
                    //         let menuRoutes = [];
                    //         res.data.data.forEach((item) => {
                    //             if (item.status == "1") {
                    //                 menuRoutes.push(item);
                    //             }
                    //         });
                    //         Storage.localSet(
                    //             "menuRoutes",
                    //             JSON.stringify(menuRoutes)
                    //         );
                    //         menuRoutes.forEach((item) => {
                    //             const viewsModules = import.meta.glob(
                    //                 "/src/**/*.vue"
                    //             );
                    //             console.log(
                    //                 viewsModules,
                    //                 viewsModules[
                    //                     `/src/views/${item.modulePath}.vue`
                    //                 ]
                    //             );
                    //             const route = {
                    //                 path: item.path,
                    //                 name: item.routeName,
                    //                 redirect: "",
                    //                 children: [],
                    //                 component:
                    //                     viewsModules[
                    //                         `/src/views/${item.modulePath}.vue`
                    //                     ],
                    //             };
                    //             router.addRoute("layout", route);
                    //         });
                    //         ElMessage({
                    //             message: "登录成功",
                    //             type: "success",
                    //         });
                    //         router.replace("/main");
                    //     });
                    // });
                    getMenuRoutes();
                    ElMessage({
                        message: "登录成功",
                        type: "success",
                    });
                    router.replace("/main");
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            });
        } else {
            // console.log('error')
        }
    });
};

const menuRoleKey = async (roleIds) => {
    const res = await menuHttp.menuRoleKey({
        roleIdList: roleIds,
    });
    if (res.data.code === 200) {
        Storage.localSet("roleKeyList", res.data.data);
    }
};
</script>

<style scoped lang="less">
#login {
    height: 100%;
    width: 100%;
    background: #fafafa;
}

.login {
    width: 100%;
    height: 50%;
    background: #91caff;
    position: relative;

    .loginAvater {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
        overflow: hidden;
        text-align: center;
        img {
            width: 100px;
            height: 100px;
        }
    }

    .loginBox {
        position: absolute;
        width: 400rem;
        bottom: -185rem;
        padding: 60rem;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;

        .loginIpt {
            margin-top: 20rem;
            margin-bottom: 5rem;
            height: 48rem;
        }

        .loginBtn {
            width: 400rem;
            height: 48rem;
            background: #91caff;
            border: none;
            margin-top: 20rem;
        }
    }
}
</style>
